<template>
	<view>
		<!-- 搜索框 -->
		<uni-search-bar placeholder="请输入搜索内容" style="height: 48px; line-height: 48px;" radius="24" bgColor="#E8EFFF"
			cancelButton="none" textColor="#959FBA" />

		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1500">
				<swiper-item v-for="item in banner">
					<image :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 功能 -->
		<view class="feature">
			<view class="feature-item">
				<image src="@/static/images/编组 11备份.png" mode="heightFix"></image>
				<view class="feature-Name">
					<text>快递代拿</text>
					<view class="btn">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
			</view>
			<view class="feature-item fixe">
				<image src="@/static/images/编组 16备份.png" mode="heightFix"></image>
				<view class="feature-Name">
					<text>上门维修</text>
					<view class="btn">
						<uni-icons type="right" size="14"></uni-icons>
					</view>
				</view>
			</view>
			<view class="feature-item stu">
				<image src="@/static/images/编组 23备份.png" mode="heightFix"></image>
				<view class="feature-Name">
					<text>学习资讯</text>
					<view class="btn">
						<uni-icons type="right" size="14" color=""></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 校园广场 -->
		<view class="plaza">
			<!-- 标题 -->
			<text class="plazaTitle">校园广场</text>
			<!-- 用户分享内容 -->
			<view class="plazaContent" v-for="item in 3">
				<view class="shareUser">
					<view class="left">
						<view class="userAvatar">
							<image src="https://img.js.design/assets/img/5f6dc0a1c5012605a98ba3f3.png" mode=""></image>
						</view>
						<view class="userInfo">
							<text class="userName">Carolien Bloeme</text>
							<text class="afterTime">1分钟前</text>
						</view>
					</view>
					<view class="right">
						<uni-icons type="more-filled" size="30"></uni-icons>
					</view>
				</view>
				<!-- 内容 -->
				<view class="shareInfo">
					<text class="shareText">五一放假玩的好累😯😯</text>
					<view class="shareImage">
						<image src="https://img.js.design/assets/img/5fd08b507458b68e1c1e8dde.png" mode="scaleToFill">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		banner
	} from "@/static/mock.js"
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	// 搜索框
	.uni-searchbar {
		margin: 20rpx 0;
		// height: 88rpx;

		// &::v-deep .uni-searchbar__box {
		// 	height: 100%;
		// }
	}

	.swiper {
		margin: 0 auto;
		width: 702rpx;
		height: 326rpx;
		// padding: 0 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		box-sizing: border-box;
		// padding: 20rpx;

		image {
			width: 100%;
		}
	}

	// 功能按钮
	.feature {
		margin: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;

		.feature-item {
			box-sizing: border-box;
			width: 30%;
			background: rgba(232, 239, 255, 1);
			padding: 16rpx 8rpx 20rpx 24rpx;
			border-radius: 16rpx;

			image {
				height: 70rpx;
			}

			.feature-Name {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 24rpx;
					font-weight: 600;
					color: rgba(138, 138, 138, 1);
				}

				.btn {
					width: 32rpx;
					height: 32rpx;
					background: rgba(187, 204, 244, 1);
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.fixe {
			background: rgba(247, 249, 255, 1);
		}

		.stu {
			background: rgba(255, 243, 255, 1);

			.feature-Name {
				.btn {
					background: rgba(249, 198, 249, 1);

					.uni-icons {
						color: rgba(207, 85, 204, 1);
					}
				}
			}

		}
	}

	// 校园广场
	.plaza {
		padding: 0 20rpx;

		// 标题
		.plazaTitle {
			font-size: 32rpx;
			font-weight: bold;
		}

		// 校园广场
		.plazaContent {
			padding: 24rpx;

			// 分享用户
			.shareUser {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 0;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.userAvatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.userInfo {
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;

						.userName {
							font-size: 32rpx;
							font-weight: 600;
							color: rgba(35, 35, 35, 1);
						}

						.afterTime {
							font-size: 24rpx;
							color: rgba(175, 175, 175, 1);
						}
					}

				}

				.right {
					transform: rotate(90deg);
				}
			}

			// 分享内容
			.shareInfo {
				.shareText {
					font-size: 24rpx;
					font-weight: 400;
				}

				.shareImage {
					margin: 20rpx 0;
					border-radius: 14rpx;
					overflow: hidden;
					width: 100%;
					height: 400rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>